-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refac: 최적화 적용 #40
refac: 최적화 적용 #40
Conversation
- LoginPage -> Head, Body, Footer 쪼개기 - ErrorText 컴포넌트 생성 및 memo 적용 - 다른 컴포넌트의 errorMessage를 ErrorText로 대체 - AuthHeader에 memo 적용 - useInput의 changeValue에 useCallback 적용
- CommunityList 리팩토링 - Icon 컴포넌트에 memo 적용 - 라우팅 추가 설정
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
icon에 memo 확인 했습니다.
는 text={}에서 안에 넣어주는 걸로 바꼈네요? 이게 더 좋은 건가?
처음에 DefaultForm 컴포넌트에서 text 타입으로 const LoginForm = forwardRef<HTMLInputElement, LoginFormProps>(
({ text, type = "text" }, ref) => (
<>
<DefaultForm
text={
<>
{text}
<SpanText text=" *" color="red" />
</>
}
ref={ref}
type={type}
/>
</>
)
);
const LoginForm = forwardRef<HTMLInputElement, LoginFormProps>(
({ text, type = "text" }, ref) => (
<>
<DefaultForm ref={ref} type={type}>
{text}
<SpanText text=" *" color="red" />
</DefaultForm>
</>
)
); 그리고 이에 따라 Text를 가져오는 컴포넌트들은 모두 동일한 형태로 가져오는 것이 일관성이 있을 것 같아 Text 컴포넌트도 동일한 형태로 변경했습니다. 또한 이렇게 바꾸니 Text에 text라는 Props가 있을 때는 text로 전달해주는 텍스트 길이가 긴 경우가 많은데 이런 경우에 <Text
text={...}
property1={...}
property2={...}
...
/> 와 같이 줄이 길어져서 가독성이 좋지 않더라구요. text props를 제거하니 <Text property1={...} property2={...} >
텍스트
</Text> 와 같이 한줄에 Props를 나타낼 수 있어서 깔끔해지는 효과도 가져올 수 있었습니당 |
최적화 적용에 해당되는 부분은 아니지만.. 최적화하는 과정에서 눈에 밟혀서 변경하게 되었습니다 |
- useCallback, useMemo 적용 - useRef 사용으로 인한 코드 변경 (ing 중)
memo, useMemo, useCallback 훅을 사용하여 최적화 진행 중입니다.
#36 by @nno3onn